/*
  学习目标：hooks补充 - useRef
  作用: 创建ref对象
  等价于: React.createRef()
  场景: 
    ✅1. 获取dom元素 
    ✅2. 可以保存任意不需要渲染的数据 
    ✅3. 获取组件实例对象
  
*/

// 1. 导入useRef函数

import React, { useEffect, useRef, useState } from 'react';

export default function App() {
  // 2. 调用useRef, 创建ref对象
  const iptRef = useRef();

  const handleClick = () => {
    console.log('iptRef  ----->  ', iptRef);
    iptRef.current.focus();
  };

  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      <input
        // 3. 绑定到dom元素上
        ref={iptRef}
        type="text"
      />
      <button onClick={handleClick}>点我input 获得光标</button>

      {isShow && <Child />}

      <button onClick={() => setIsShow(!isShow)}>点我卸载</button>
    </div>
  );
}

// 1. 挂载后开启定时器
// 2. 卸载时清除定时器
// 3. 可以保存任意不需要渲染的数据
function Child() {
  const timerIdRef = useRef();

  useEffect(() => {
    // 赋值任意数据到current竖向
    timerIdRef.current = setInterval(() => {
      console.log('定时器开启了  ----->  ');
    }, 500);
  }, []);

  useEffect(() => {
    return () => {
      clearInterval(timerIdRef.current);
    };
  }, []);
  return <div>Child</div>;
}
